<template>
  <div class="ajax-table">
    <a-table
      :columns="columns"
      :row-key="(record) => record.login.uuid"
      :data-source="data"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="name">
        {{ name.first }} {{ name.last }}
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div>
          <p @click="oper(text, record, index)">{{ index }}操作</p>
        </div>
      </template>
    </a-table>

    <cDialog v-model="visible">
      <div>
        {{ item }}
      </div>
    </cDialog>
  </div>
</template>
<script>
import cDialog from "../dialog/index.vue";
import { queryData_get } from "@/api/index";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    width: "20%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" },
    ],
    width: "20%",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
  {
    title: "operation",
    dataIndex: "operation",
    text: "123",
    // fixed: 'right',
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  data() {
    return {
      data: [],
      pagination: {
        position: "bottom",
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "15", "25"],
        defaultPageSize: 5,
        current: 1,
      },
      loading: false,
      columns,
      visible: false,
      item: null,
      selectedRowKeys: [], // Check here to configure the default column
    };
  },
  components: { cDialog },
  mounted() {
    this.fetch({ results: 3, page: 1 });
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    oper(text, record, index) {
      console.log(text, index);
      this.item = record;
      this.visible = true;
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      queryData_get({
        ...params,
      }).then((data) => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        console.log(data, "sas");
        pagination.total = 200;
        this.loading = false;
        this.data = data.results;
        this.pagination = pagination;
      });
    },
  },
};
</script>
